var zIndex = [0,10,9,8,7,6,5,4,3,2,1]

function itemInit(id){
  var delLock = false,
      index = id,
      imgNum = 1,
      idName, el, dom, mc, timeOut

  //初始化
  initNewImg(true)

  //基数值
  var START_X = 0,
      START_Y = 0,
      transform

  function initNewImg(first) {
    idName = `#img${index}`
    el = document.querySelector(idName)
    dom = $(idName)
    mc = new Hammer.Manager(el)
    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }))
    mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'))

    //移动
    mc.on("panstart panmove", onPan)
    //快速移动
    mc.on("swipe", onSwipe)
    //秘密事件（凡有交互必触发）
    mc.on("hammer.input", onInput)

    resetElement(first)
  }

  //重置回原位
  function resetElement(first) {
    if(!first) dom.addClass('animate')
      transform = {
        translate: { 
          x: START_X, 
          y: START_Y 
        }
      }
    timeOut = setTimeout(function(){
      dom.css('z-index', zIndex[index])
    },700)
    requestElementUpdate()
  }

  //更新translate样式
  function updateElementTransform() {
    var value = [
      'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)'
    ]
    value = value.join(" ")
    el.style.webkitTransform = value
    el.style.mozTransform = value
    el.style.transform = value
  }

  function removeEl() {
    updateElementTransform()
    setTimeout(function(){
      //防止双重触发以及防止拖动与按钮双重触发
      if(!delLock && tapLock) return
      delLock = false
      tapLock = false
      $('.boyImg').css('transform', 'translate3d( ' + 39*topItemIndex + '%, 0, 0)')
      topItemIndex++
      dom.remove()
      if(index == 10){
        $('.lastPage').css('z-index', 1)
        showHeiHeiHei()
      }
    }, 600)
  }

  function requestElementUpdate(del) {
    if(del){
      tapLock = true
      reqAnimationFrame(removeEl)
    }else{
      reqAnimationFrame(updateElementTransform)
    }
  }

  //拖动触发
  function onPan(ev) {
    dom.css('z-index', 100)
    if(delLock) return
    dom.removeClass('animate')
    transform.translate = {
      x: START_X + ev.deltaX,
      y: START_Y + ev.deltaY
    }
    requestElementUpdate()
  }

  //快速拖动触发
  function onSwipe(ev) {
    if(delLock) return
    //可微调
    if(Math.abs(transform.translate.x) < Math.round(dom.width() / 10)){
      requestElementUpdate()
    }else{
      //防止别的动作触发删除
      delLock = true
      dom.addClass('animate')
      transform = {
        //飞出的方位(可调)
        translate: {
          x: ev.deltaX/Math.abs(ev.deltaX) * dom.width(),
          y: ev.deltaY/Math.abs(ev.deltaY) * dom.width()
        }
      }
      requestElementUpdate(true)
    }
  }

  //手势结束后触发
  function onInput(ev) {
    if(delLock) return
    if(ev.isFinal) {
      //可微调
      if(Math.abs(transform.translate.x) < Math.round(dom.width() / 4)){
        resetElement() 
      }else{
        //防止别的动作触发删除
        delLock = true
        dom.addClass('animate')
        transform = {
          //飞出的方位(可调)
          translate: {
            x: ev.deltaX/Math.abs(ev.deltaX) * dom.width() * 1.5,
            y: ev.deltaY/Math.abs(ev.deltaY) * dom.width()
          }
        }
        requestElementUpdate(true)
      }
    }
  }
}

//ajax异步调用时注释
import Img1 from '../public/img1.jpg'
import Img2 from '../public/img2.jpg'
import Img3 from '../public/img3.jpg'
import Img4 from '../public/img4.jpg'
import Img5 from '../public/img5.jpg'
import Img6 from '../public/img6.jpg'
import Img7 from '../public/img7.jpg'
import Img8 from '../public/img8.jpg'
import Img9 from '../public/img9.png'
import Img10 from '../public/img10.jpg'
var arr = [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9, Img10]

// var arr = []
// $.ajax({
//   url: //url
//   type: 'GET',
//   dataType: 'json',
//   data: {},
//   success: function(result){
//     //这里做逻辑处理
//     arr = result.imgList
//     setImg()
//   }
// })

function setImg() {
  $.each(arr, function(key, val) {
    var id = `#img${key+1}`
    var newImgItem = $(`<img id="img${key+1}">`)
    newImgItem.css('z-index', zIndex[key+1])
    newImgItem.attr('src', val)
    newImgItem.addClass('item')
    $('.centerFrame').append(newImgItem)
    new itemInit(key+1)
  })
}

//ajax异步调用时注释
setImg()






